<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<template>
    <div id="ant-login-box">
        <a-form :model="formState" name="basic" label-align="left" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
            autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
            <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '用户名不能为空' }]">
                <a-input v-model:value="formState.username" placeholder="请输入用户名" />
            </a-form-item>

            <a-form-item label="密码" name="password" :rules="[{ required: true, message: '密码不能为空' }]">
                <a-input-password v-model:value="formState.password" placeholder="请输入密码" />
            </a-form-item>

            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                <a-button type="primary" html-type="submit">登录</a-button>
            </a-form-item>
        </a-form>
    </div>

</template>
<script lang="ts" setup>
    import { reactive } from 'vue'
    import { userLogin } from '@/api/user'
    import { useLoginUserStore } from '@/store/useLoginUserStore'
    // import { useChatStore } from '@/store/useChatStore'
    import { useRouter } from 'vue-router'
    import wsService from '@/api/websocket'
    const loginUserStore = useLoginUserStore()
    // const chatStore = useChatStore()
    const router = useRouter()

    interface FormState {
        username: string
        password: string
    }

    const formState = reactive<FormState>({
        username: '',
        password: '',
    });


    const onFinishFailed = (errorInfo: unknown) => {
        console.log('Failed:', errorInfo)
    };

    const handleSubmit = () => {
        userLogin(formState).then(async res => {
            // console.log(res.data)
            if (res.data.code === 0) {
                await loginUserStore.fetchLoginUser()
                loginUserStore.loginStatus++
                wsService.connect()
                router.push({
                    path: '/chat'
                })
            } else {
                alert(res.data.msg)
            }

        })
    }

    const onFinish = (values: unknown) => {
        console.log('Success:', values)
        handleSubmit()
    }

</script>

<style lang="less" scoped>
    #ant-login-box {
        display: flex;
        height: 300px;
        width: 300px;
        justify-content: center;
        align-items: center;
        padding: 30px;
        border-radius: 20px;
        background-color: rgba(255, 255, 255, 0.84);
        flex-direction: column;
    }
</style>